import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom/client'

function Example () {
    // 该hook表示 count=0，并设置修改count的方法-setCount
    const [count, setCount] = useState(0)
    // DOM渲染完成后执行-hook
    useEffect(() => {
        // ` 表示模板字符串，该写法可以引入变量，多行文本，会保留所有的空格，换行等
        if (true) {
            document.title = `you clicked ${count} times`
            return function cleanUp () {
                console.log("在组件卸载的时候会执行该操作")
            }
        }
    }, [count]) // 只有在count更新时触发
    return (
        <div>
            <p>you click {count} 次</p>
            <button onClick={() => {
                setCount(count + 1)
            }} />
        </div>
    )
}
ReactDOM.createRoot(document.getElementById('root')).render(<Example />)